<template>
    <div>
        <h2>用户{{sumStore.name}},结果和：{{ sumStore.sum }}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>


<script lang="ts" setup name="Sum">
import { ref } from "vue";
//引入对应的状态
import {  useCountStore } from "@/store/count";
const sumStore = useCountStore();
let n = ref<number>(1);

function add() {
    //第一种修改方法
//    sumStore.sum += n.value
   //第二种使用patch方法，批量修改
   let up = {
                sum:16,
                name:'王五1111'
            }
//    sumStore.$patch(up)
    //方法三使用action方法
    sumStore.onChange(up)
}
function minus() {
 
}
</script>



<style scoped>
div {
    background-color: #007bff;
}
.counter {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
}

h2 {
    margin-bottom: 10px;
    font-size: 24px;
}

select {
    margin-right: 10px;
    padding: 5px;
    font-size: 16px;
}

button {
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
}

button:hover {
    background-color: #0056b3;
}
</style>
